<div fxLayoutAlign="center">
  <mat-card>

    <h3 translate>TITLE_FORGOT_PASSWORD</h3>

    <div class="form-container">

      <div class="confirmation" [hidden]="!(confirmation && !emailControl.dirty && !securityQuestionControl.dirty && !passwordControl.dirty && !repeatPasswordControl.dirty)">{{ confirmation }}</div>

      <div class="error" [hidden]="!(error && !emailControl.dirty && !securityQuestionControl.dirty && !passwordControl.dirty && !repeatPasswordControl.dirty)">{{ error }}</div>

      <mat-form-field appearance="outline">
        <mat-label translate>LABEL_EMAIL</mat-label>
        <input id="email" [formControl]="emailControl" (ngModelChange)="findSecurityQuestion()"
        type="text" matInput placeholder="Enter your email">
        <mat-error *ngIf="emailControl.invalid && emailControl.errors.required" translate>MANDATORY_EMAIL</mat-error>
        <mat-error *ngIf="emailControl.invalid && emailControl.errors.email" translate>INVALID_EMAIL</mat-error>
      </mat-form-field>

    </div>

    <div class="form-container" *ngIf="securityQuestion">

        <mat-form-field appearance="outline">
          <mat-label>{{ securityQuestion }}</mat-label>
          <input id="securityAnswer" [formControl]="securityQuestionControl" type="password" matInput placeholder="">
          <mat-error *ngIf="securityQuestionControl.invalid && securityQuestionControl.errors.required" translate>MANDATORY_SECURITY_ANSWER</mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline">
            <mat-label translate>LABEL_NEW_PASSWORD</mat-label>
            <input id="newPassword" [formControl]="passwordControl" type="password" matInput placeholder="">
            <mat-error *ngIf="passwordControl.invalid && passwordControl.errors.required" translate>MANDATORY_NEW_PASSWORD</mat-error>
            <mat-error *ngIf="passwordControl.invalid && passwordControl.errors.minlength" translate [translateParams]="{length: '5-20'}">INVALID_PASSWORD_LENGTH</mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline">
            <mat-label translate>LABEL_PASSWORD_REPEAT</mat-label>
            <input id="newPasswordRepeat" [formControl]="repeatPasswordControl" type="password" matInput placeholder="">
            <mat-error *ngIf="repeatPasswordControl.invalid && repeatPasswordControl.errors.required" translate>MANDATORY_PASSWORD_REPEAT</mat-error>
        </mat-form-field>

      </div>

    <button id="resetButton" [disabled]="emailControl.invalid || securityQuestionControl.invalid || passwordControl.invalid || repeatPasswordControl.invalid" (click)="resetPassword()" mat-raised-button color="primary"><i class="fas fa-save fa-lg"></i> {{'BTN_CHANGE' | translate}}</button>

  </mat-card>
</div>
